<template>
    <div>
        <div class="left">
            <div class="top">
                <p>审批人信息</p>
                <p>
                    姓名：
                    <span>{{ data.username }}</span>
                </p>
                <div>
                    <p>
                        部门:
                        <span>{{ data.departmentName }}</span>
                    </p>
                    <p>
                        入职时间{{}}
                        <span>{{ data.timeOfEntry }}</span>
                    </p>
                </div>
            </div>
            <div class="bottom">
                <p>请假申请</p>
                <div>
                    <p>
                        审批类型：
                        <span>{{ data.processName }}</span>
                    </p>
                    <p>
                        开始时间
                        <span>{{ obj1.startTime }}</span>
                    </p>
                </div>
                <div>
                    <p>
                        休假类型:
                        <span>{{ data.processKey == 'process_leave' ? '请假' : '调休' }}</span>
                    </p>
                    <p>
                        结束时间:
                        <span>{{ obj1.endTime }}</span>
                    </p>
                </div>
                <div>
                    <p>
                        请假时长
                        <span>{{ obj1.duration }}</span>
                    </p>
                    <p>
                        申请单位:
                        <span>{{ obj1.applyUnit }}</span>
                    </p>
                </div>
                <div>
                    <p>
                        申请原因:
                        <span>{{ obj1.reason }}</span>
                    </p>
                    <p>
                        审批通过:
                        <span>{{ data.processState == '1' ? "审批中" : '以通过' }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="right">
            <div style="height: 300px; max-width: 600px">
                <el-steps direction="vertical" :active="1">
                    <el-step :title="item.handleUserName+item.handleOpinion " v-for="item in data1"/>
                </el-steps>
            </div>
        </div>
        <!-- <button @click="cs">测试</button> -->
    </div>
</template>

<script setup>
import { onMounted, ref ,computed} from 'vue';
import { useRouter } from 'vue-router';
import { getDet ,getDetSp} from '../api/axios.js'
let router = useRouter()
let id = router.currentRoute.value.query.id
let data = ref([])
let obj = ref({})
let obj1 = ref({})
let data1=ref([])
let get = async (id) => {
    let res = await getDet(id)
    console.log(res.data.data);
    let res1=await getDetSp(id)
    console.log(res1.data.data,'res1111');
    data1.value=res1.data.data
    data.value = res.data.data
    obj.value = res.data.data.procData
    obj1.value = JSON.parse(obj.value)
    console.log(obj1.value.applyUnit, 'obj1');
}

// const cs=()=>{
//     console.log(JSON.parse(obj.value),'55555');
//     obj1.value=JSON.parse(obj.value)
//     console.log(obj1.value.applyUnit,'obj1');
// }
// let getSp=async ()=>{
    
// }
onMounted(() => {
    console.log(id);
    get(id)

})
</script>

<style scoped></style>